<template>
  <div class="wrapper playList ">
    <div class="title">全部歌单</div>
    <mu-flexbox  wrap="wrap" justify="space-around" class="box" :gutter="0">
      <mu-flexbox-item basis="40%" class="list-item" key="item.dId" v-for="item in playList">
        <router-link :to="{ name: 'listDetail', params: { id: item.dId}}">
          <div class="list-bar">{{ item.play | formatCount }}</div>
          <img class="list-img img-response" :src="'http://hongtaofans.cn/music/resources/pic/disk/'+item.pic" lazy="loading">
          <div class="list-name">{{item.name}}</div>
        </router-link>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
    <!--<div>{{JSON.stringify(playList)}}</div>-->
  </div>
</template>

<script>
// import api from '../api'
import Axios from 'axios'
export default {
  name: 'songList',
  data () {
    return {
      scroller: null,
      playList: [],
      offset: 0,
      loading: false
    }
  },
  created () {
    this.get()
  },
  mounted () {
    this.scroller = this.$el
  },
  methods: {
    get () {
      this.loading = true
      // this.$http.get(api.getPlayList()).then((res) => {
        // var total = res.data.total
        // var list = (res.data.playlists)
        // for (let i = 0; i < list.length; i++) {
        //   this.playList.push(list[i])
        // }
        // this.offset = this.offset + 6
        // if (this.offset > total) this.offset = total
        // this.loading = false
      var instance = Axios.create({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'text/html, application/json'
        }
      })
      instance.get('http://hongtaofans.cn/music/disk/getalldisk')
      .then((res) => {
        if (res.data.status === 1) {
          const total = res.data.result.length
          const list = res.data.result
          for (let i = 0; i < total; i++) {
            this.playList.push(list[i])
          }
          this.loading = false
        } else {
          console.log('获取数据出错！')
        }
      })
      .catch((error) => {
        console.log(error)
      })
    },
    loadMore () {
      this.get()
    }
  },
  filters: {
    formatCount (count) {
      if (count < 10000) {
        return count
      } else {
        return (count / 10000).toFixed(0) + '万'
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/theme.less";
.wrapper {
    width: 100%;
    padding:0 10px;
    height: 27.1rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

  .title {
    margin: .3rem 0 .3rem 0;
    padding-left: .2rem;
    text-align: left;
    border-left: .15rem solid @primaryColor;
  }

  .list {
    &-bar {
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      width: 7.5rem;
      text-align: right;
      padding: 2px 5px;
      background-color: rgba(0,0,0,.2);
    }
    &-item {
        width: 100%;
        position: relative;
        margin: 0 5px 5px 10px;
        a {
          color:rgba(0,0,0,.87);
        }
    }
    &-img {
      width: 7.5rem;
      height: 7.5rem;
    }
     &-img[lazy=loading] {
      background: url('../../static/default_cover.png') no-repeat;
      background-size: cover;
    }

    &-name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
  }
</style>
